<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>主页</title>
	<link rel="stylesheet" href="./css/style.css">
	<style>
		.feng1 {
			background-image: url(./img/fan.png);
			background-size: 100%;
			min-width: calc(20vh / 1872 * 1310);
			width: calc(20vh / 1872 * 1310);
			height: 20vh;
			position: relative;
			color: #000;
		}

		.fan1 {
			background-image: url(./img/fan-2.png);
			width: calc(20vh / 1872 * 942);
			height: calc(20vh / 1872 * 927);
			background-size: 100%;

			position: absolute;
			top: calc(20vh / 1872 * 202)
				/*226px*/
			;
			left: calc(20vh / 1872 * 147)
				/*26px*/
			;
			transform-origin: 52.52% 49.087%;
			animation: rotation 0.01s linear infinite;
		}

		.Open1 {
			background-image: url(./img/Open.png);
			width: calc(20vh / 1872 * 80)
				/*80px*/
			;
			height: calc(20vh / 1872 * 80)
				/*80px*/
			;
			background-size: 100%;

			position: absolute;
			top: calc(20vh / 1872 * 1419)
				/*50px*/
			;
			left: calc(20vh / 1872 * 617)
				/*340px*/
			;
			transform-origin: center;
			animation: rotation 0.01s linear infinit
		}

		.Open1:hover {
			background-image: url(./img/Open-2.png);
		}

		.feng2 {
			background-image: url(./img/feng.png);
			background-size: 100%;
			min-width: calc(20vh / 781.971947 *500);
			width: calc(20vh / 781.971947 *500);
			height: 20vh;
			/* 500 / 781.971947*/
			position: relative;
		}

		.fan2 {
			background-image: url(./img/feng-1.png);
			width: calc(20vh / 781.971947 * 200);
			height: calc(20vh / 781.971947 * 205);
			background-size: 100%;

			position: absolute;
			top: calc(20vh / 781.971947 * 226);
			left: calc(20vh / 781.971947 * 26);
			transform-origin: 47.52% 49.087%;
			animation: rotation 0.01s linear infinite;
		}

		.Open2 {
			background-image: url(./img/Open.png);
			width: calc(20vh / 781.971947 * 80)
				/*80px*/
			;
			height: calc(20vh / 781.971947 * 80);
			background-size: 100%;

			position: absolute;
			top: calc(20vh / 781.971947 * 50);
			left: calc(20vh / 781.971947 * 340);
			transform-origin: center;
			animation: rotation 0.01s linear infinit
		}

		.Open2:hover {
			background-image: url(./img/Open-2.png);
		}

		#main {
			width: 90vw;
			margin: 0 auto;
		}

		.windows {
			margin: 20px auto;
			background-color: white;
			border-radius: 20px;
			padding: 50px 20px;
			width: 400px;
			min-height: 300px;
		}

		.windows>* {
			text-align: center;
		}


		.fan-list {
			margin: 10px;
			background-color: white;
			border-radius: 20px;
			padding: 10px;
			float: left;
			min-width: 280px;
			width: calc(90vw / 4 - 20px);
		}

		.list_left {
			min-width: 150px;
			width: calc(90vw / 4 - 40px - 20vh / 1872 * 1310);
			position: relative;
		}

		.switch {
			width: 50px;
			height: 50px;
			background-size: 100%;
			display: block;
			position: absolute;
			bottom: 5px;
			left: 10px;
		}
	</style>
	<script src="./js/axios.min.js"></script>
	<script src="./js/main.js"></script>
	<script src="./js/vue.js"></script>
</head>

<body>
	<div id="app">
		<div class="nav flex-container-between">
			<div>
				<ul class=" flex-container-start">
					<li><a href="./home.html">主页</a></li>
					<li><a href="./recharge.html">充值</a></li>
					<li><a href="./increase.html">添加</a></li>
				</ul>
			</div>
			<div>
				<ul class=" flex-container-end">
					<li><a @click="exit()">退出登录</a></li>
				</ul>
			</div>
		</div>
		<div>
			<div class="card">
				<h1>用电情况</h1>
				<h3>用户：{{uesr_data.username}}</h3>
				<h3>剩余电量：{{uesr_data.remain}}</h3>
				<h3>当前使用功率(W/h)：{{uesr_data.power}}</h3>
			</div>
			<ul>
				<li class="fan-list" v-for="(i,index) in fan_data" :key="i.id">
					<a v-bind:data-id="i.id" :href="'./detail.html?id='+i.id">
						<div class="flex-container-between">
							<div class="list_left">
								<div>风扇id:{{i.id}}</div>
								<div>风扇名称:{{i.name}}</div>
								<div>风扇型号:{{i.type_name}}</div>
								<div>状态:{{showState(i.status)}}</div>
								<a class="switch" @click.prevent.stop="toggleRotation" v-bind:data-index="index"
									v-bind:style="{backgroundImage : i.status ? 'url(\'./img/Open-3.png\')':'url(\'./img/close.png\')' }"></a>
							</div>
							<div style="position: relative;" v-bind:id="i.id">
								<div v-bind:class="'fan'+i.type_id"
									v-bind:style="{animation : i.status?'rotation-accelerate 0.01s linear infinite':'rotation-decelerate 2s linear forwards' }">
								</div>
								<div v-bind:class="'feng'+i.type_id"></div>
								<span v-bind:class="'Open'+i.type_id" @click.prevent.stop="toggleRotation"
									v-bind:data-index="index"></span>
							</div>
						</div>
					</a>
				</li>
			</ul>
		</div>
	</div>



	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				fan_data: [],
				uesr_data: {
					username: '',
					remain: 0,
					power: 0,
				},
			},
			methods: {
				toggleRotation(event) {
					const index = event.target.dataset.index;
					if (this.uesr_data.remain <= 0) {
						alert('没电了，请充值');
					} else {
						if (!this.fan_data[index].status) {
							axios.post('/appliance/poweron', {
									id: this.fan_data[index].id
								})
								.then((response) => {
									const responsedata = response.data
									// 服务器状态码
									if (responsedata.code != 0) {
										// 如果不为0，说明有错误, msg为云端错误信息
										alert(responsedata.msg);
										// 截断后面的运行
										return;
									}
									axios.get('/user/info')
										.then((response) => {
											const responsedata = response.data
											console.log(response)
											// 服务器状态码
											if (responsedata.code != 0) {
												// 如果不为0，说明有错误, msg为云端错误信息
												alert(responsedata.msg);
												// 截断后面的运行
												if (responsedata.code == 401)
													window.location.href = "./login.html";
												return;
											}
											// 下面的代码只有在服务器返回状态码为0时才会执行, 也就是说服务器返回正确的数据
											this.uesr_data = responsedata.data;

										})
										.catch((error) => {
											console.log(error);
										});
								})
								.catch(function (error) {
									console.log(error);
								});
						} else {
							axios.post('/appliance/poweroff', {
									id: this.fan_data[index].id
								})
								.then((response) => {
									const responsedata = response.data
									// 服务器状态码
									if (responsedata.code != 0) {
										// 如果不为0，说明有错误, msg为云端错误信息
										alert(responsedata.msg);
										// 截断后面的运行
										return;
									}
									axios.get('/user/info')
										.then((response) => {
											const responsedata = response.data
											console.log(response)
											// 服务器状态码
											if (responsedata.code != 0) {
												// 如果不为0，说明有错误, msg为云端错误信息
												alert(responsedata.msg);
												// 截断后面的运行
												if (responsedata.code == 401)
													window.location.href = "./login.html";
												return;
											}
											// 下面的代码只有在服务器返回状态码为0时才会执行, 也就是说服务器返回正确的数据
											this.uesr_data = responsedata.data;

										})
										.catch((error) => {
											console.log(error);
										});
								})
								.catch(function (error) {
									console.log(error);
								});
						}
						this.fan_data[index].status = !this.fan_data[index].status;
					}
				},
				showState(state) {
					if (state)
						return "开启"
					return "关闭"
				},
				exit() {
					axios.post('/user/logout')
						.then((response) => {
							const responsedata = response.data
							// 服务器状态码
							if (responsedata.code != 0) {
								// 如果不为0，说明有错误, msg为云端错误信息
								alert(responsedata.msg);
								// 截断后面的运行
								return;
							}
							window.location.href = "./login.html";
						})
						.catch(function (error) {
							console.log(error);
						});
				}
			},
			computed: {
				showTime() {
					var str = "";
					var days = Math.floor(this.OpenTime / 86400)
					var hours = Math.floor((this.OpenTime % 86400) / 3600);
					if (days != 0)
						str += days + "天" + hours + "小时"
					else if (hours != 0)
						str += hours + "小时"
					var minutes = Math.floor((this.OpenTime % 3600) / 60);
					str += minutes + "分钟"
					var remainingSeconds = this.OpenTime % 60;
					str += remainingSeconds + "秒"
					return str
				},
			},
			beforeCreate() { //生命周期初始化前
				axios.get('/appliance/list')
					.then((response) => {
						const responsedata = response.data
						console.log(response)
						// 服务器状态码
						if (responsedata.code != 0) {
							// 如果不为0，说明有错误, msg为云端错误信息
							alert(responsedata.msg);
							if (responsedata.code == 401)
								window.location.href = "./login.html";
							// 截断后面的运行
							return;
						}
						// 下面的代码只有在服务器返回状态码为0时才会执行, 也就是说服务器返回正确的数据
						this.fan_data = responsedata.data;

					})
					.catch((error) => {
						console.log(error);
					})
				axios.get('/user/info')
					.then((response) => {
						const responsedata = response.data
						console.log(response)
						// 服务器状态码
						if (responsedata.code != 0) {
							// 如果不为0，说明有错误, msg为云端错误信息
							alert(responsedata.msg);
							// 截断后面的运行
							if (responsedata.code == 401)
								window.location.href = "./login.html";
							return;
						}
						// 下面的代码只有在服务器返回状态码为0时才会执行, 也就是说服务器返回正确的数据
						this.uesr_data = responsedata.data;

					})
					.catch((error) => {
						console.log(error);
					});
			},
			mounted() {
				setInterval(() => {
					axios.get('/user/info')
						.then((response) => {
							const responsedata = response.data
							console.log(response)
							// 服务器状态码
							if (responsedata.code != 0) {
								// 如果不为0，说明有错误, msg为云端错误信息
								alert(responsedata.msg);
								// 截断后面的运行
								if (responsedata.code == 401)
									return;
							}
							// 下面的代码只有在服务器返回状态码为0时才会执行, 也就是说服务器返回正确的数据
							this.uesr_data = responsedata.data;

						})
						.catch((error) => {
							console.log(error);
						});
				}, 10000)
			}
		})
	</script>
</body>

</html>